<template>
  <view class="lightColour navTop" ref="navTop" id="navTop">
    <van-nav-bar
      title="绑定手机号"
      left-arrow
      fixed
      class="loginNav"
      ref="loginNav"
      @click-left="onClickLeft"
    />
    <div class="line"></div>
    <van-cell-group :border="false">
      <van-cell title="国家和地区" is-link value="中国" @tap="show=true"/>
      <van-field value placeholder="手机号">
        <div class="phone" slot="label">{{value}}</div>
      </van-field>
      <van-field value placeholder="请输入短信验证码">
        <view slot="button" class="getCode">获取验证码</view>
      </van-field>
    </van-cell-group>
    <div class="btnBox">
		    <button class="primary">立即绑定</button>
		</div>

    <van-popup :show="show" position="bottom" @close="show=false">
			<van-picker show-toolbar :columns="columns" @cancel="show=false"  @confirm="onConfirm" />
		</van-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show:false,
      columns:['+86', '宁波', '温州', '嘉兴', '湖州'],
				value : '+86',
    };
  },
  onReady() {},
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    onConfirm(event){
      console.log(event)
				const { picker, value, index } = event.detail;
				this.value = value
				this.show = false
				console.log(this.value)
			}
  }
};
</script>

<style lang="less">
.phone{
  width: 100upx;
    border-right: 1upx solid #E7E7E7;
  
}
.btnBox{margin-top: 100upx;}
.getCode{color:#3867FF;font-size: 24upx}
</style>
